/*
 * @Description: 弹框组件（textarea）
 * @Author: buwei.huang
 * @Date: 2019-09-05 10:31:21
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-05 16:12:43
 */
<template>
  <mask-module
    ref="mask"
    :isClickBgToHide="false"
  >
    <div class="remark_wrap">
      <div class="textearea_wrap">
        <div class="textarea">
          <textarea
            v-model="textareaValue"
            placeholder="想对我们说的话"
            maxlength="200"
            @input="changeEmoji()"
          ></textarea>
        </div>
        <span>{{textareaValueLength}}/200</span>
      </div>
      <div class="btns flex-h flex-hsb">
        <button
          class="btn_font"
          @click="onCancle"
        >取消</button>
        <button
          class="btn_font baseColorNoAcitve"
          @click="onConfirm"
        >确认</button>
      </div>
    </div>

  </mask-module>
</template>
<script>
import AnimatedDialog from '@/components/animateddialog/AnimatedDialog'
export default {
  components: {
    'mask-module': AnimatedDialog
  },
  props: {
    textValue: {
      type: String,
      default: null
    }
  },
  computed: {
    mask() {
      return this.$refs.mask
    },
    textareaValueLength() {
      return this.textareaValue.length
    }
  },
  data() {
    return {
      textareaValue: ''
    }
  },
  methods: {
    onCancle() {
      this.mask.hide()
      this.$emit('onOverflow', false)
    },
    onConfirm() {
      this.$emit('setTextareaValue', this.textareaValue)
      this.mask.hide()
      this.$emit('onOverflow', false)
    },
    setTextareaValue(val) {
      this.textareaValue = val
      this.$nextTick(() => {
        let el = document.getElementsByTagName('textarea')[1]
        el.focus()
      })
    },
    // 意见输入框过滤表情
    changeEmoji() {
      let patt = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g
      this.textareaValue = this.textareaValue.replace(patt, function (char) {
        if (char.length === 2) {
          return ''
        } else {
          return char
        }
      })
    }
  }
}
</script>
<style>
.remark_wrap {
  width: 640px;
  height: 432px;
  background-color: #fff;
  border-radius: 16px;
}
.textearea_wrap .textarea {
  width: 100%;
  height: 264px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 50px;
}
.textearea_wrap textarea {
  width: 100%;
  height: 210px;
  resize: none;
  outline: none;
  border: none;
  overflow: auto;
  background-color: #f9f9f9;
  padding: 16px 32px;
  box-sizing: border-box;
  font-size: 16px; /* no */
  line-height: 44px;
}
.textearea_wrap {
  margin: 32px 16px 0;
  position: relative;
}
.textearea_wrap span {
  color: #333333;
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 14px; /* no */
  line-height: 20px; /* no */
}
.btns {
  box-sizing: border-box;
  border-bottom-left-radius: 16px;
}
.btns > button {
  width: 50%;
  height: 86px;
  border: none;
  background: #fff;
}
.btns > button:nth-of-type(1) {
  border-top: 1px solid rgb(0, 0, 80, 0.05); /*no*/
  border-right: 1px solid rgb(0, 0, 80, 0.05); /*no*/
  border-bottom-left-radius: 16px;
}
.btns > button:nth-of-type(2) {
  border-top: 1px solid rgb(0, 0, 80, 0.05); /*no*/
  border-bottom-right-radius: 16px;
}
.btn_font {
  font-size: 18px; /*no*/
  line-height: 22px; /*no*/
}
</style>
